{% extends "base.html" %}
{% load staticfiles %}

{% load imagekit %}

{% block main %}
    <div class="bg-light">

        <div class="nav-scroller bg-white box-shadow">
            <nav class="nav nav-underline container" >
                <a class="nav-link {% ifequal 0 current_category_id %}text-success{% endifequal %}"
                   href="{% url 'books:book_list' %}">全部
                </a>
            {% for category in categories %}
                 <a class="nav-link {% ifequal category.id|stringformat:'i' current_category_id %}text-success{% endifequal %}"
                    href="?category={{ category.id }}">{{ category.name }}
                 </a>
            {% endfor %}
            </nav>
        </div>

{#        <div class="container">#}
{#            <div class="row mt-3">#}
{#                {% for book in books %}#}
{#                    <div class="col-md-4">#}
{#                        <div class="card bg-dark mb-4 text-white box-shadow" >#}
{#                            {% thumbnail '434x120' book.cover_picture %}#}
{#                            <div class="card-img-overlay">#}
{#                                <h5 class="card-title"><a class="text-white font-weight-bold" href="{{ book.get_absolute_url }}">{{ book.name }}</a></h5>#}
{#                                <p class="csard-text">{{ book.created|timesince }} 前</p>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                {% endfor %}#}
{#            </div>#}
{#        </div>#}

        <div class="container">
            <div class="row mt-3">
                {% for book in books %}
                    <div class="col-md-4">
                        <!-- 桌面排版 -->
                        <div class="card mb-4 box-shadow">
                            <a href="{{ book.get_absolute_url }}">
                                <img class="card-img-top img-fluid flex-auto d-none d-md-block img-thumbnail" src="{{ book.cover_picture.url }}" style="height: 225px;" alt="Card image cap">
                            </a>
                          <div class="card-body">
                              <h5 class="card-title"><a href="{{ book.get_absolute_url }}">{{ book.name }}</a></h5>
                              <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">{{ book.created|timesince }}前</small>
                              </div>
                          </div>
                      </div>
{#                        <!-- 手机排版 -->#}
{#                        <div class="card mb-4 bg-dark text-white d-block d-sm-none" >#}
{#                            <img class="card-img" src="{{ book.cover_picture.url }}" style="height: 100px" alt="Card image">#}
{#                            <div class="card-img-overlay pt-6">#}
{#                                <h5><strong>{{ book.name }}</strong></h5>#}
{#                            </div>#}
{#                        </div>#}
                    </div>
                {% endfor %}

                {% for fake_book in fake_books %}
                    <div class="col-md-4">
                      <div class="card mb-4 box-shadow">
                        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title"><a href="#">book-name-{{ fake_book }}</a></h5>
                            <div class="d-flex justify-content-between align-items-center">
{#                                <div class="btn-group">#}
{#                                    <button type="button" class="btn btn-sm btn-outline-secondary">写书评</button>#}
{#                                    <button type="button" class="btn btn-sm btn-outline-secondary">下载</button>#}
{#                                </div>#}
                                <small class="text-muted">{{ fake_book }} 分钟前</small>
                            </div>
                        </div>
                      </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}
